<template>
	  <el-container>
	    <SideMenu></SideMenu>
		
	    <el-container>
	      <el-header>
			  <strong>admin管理
			  </strong>
			  <div class="header-avatar">
				<el-avatar :src='userifo.avatar'></el-avatar>
				<el-dropdown>
				      <el-button type="primary">
				        {{userifo.username}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
				      </el-button>
				      <template #dropdown>
				        <el-dropdown-menu>
						
				          <el-dropdown-item><router-link to='/UserCenter'>个人中心</router-link></el-dropdown-item>
				          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
				        </el-dropdown-menu>
				      </template>
				</el-dropdown>
			  </div>
		  </el-header>
	      <el-main>
			  <Tabs></Tabs>
			  <div style="padding: 0 15px;">
			  	<router-view/>
			  </div>
			  
				
		  </el-main>
	    </el-container>
	  </el-container>
	
</template>

<script setup>
	
	import SideMenu from'./inc/SideMenu.vue'
	import Tabs from './inc/Tabs.vue'
	import{  onBeforeUpdate,reactive, watch}from'vue'
	import axios from 'axios'
	import { useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	
	
	let userifo=reactive({
		id:'',
		username:'',
		avatar:''
	})
	const store=useStore()
	const router=useRouter()
	const logout=function(){
		axios.post('/logout').then( res=>{
			localStorage.clear()
			sessionStorage.clear()
			store.commit('resetState')
			router.push('/Login')
		})
	}
	
	
	let getinfo= async ()=>{
		try{
			return await axios.get('/sys/userinfo').then(res=>{
				// userifo=res.data.data
				Object.assign(userifo,res.data.data)
				
			}
				
			)
		}catch (e){
			return await e
		}
	}
	getinfo()
	
	
</script>

<style scoped>
	html,body{
		margin: 0; 
		padding: 0;
		border: 0;
		height: 100%;
	}
	.header-avatar {
	  float: right;
	  width: 210px;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  
	}
	.el-container{
		display: flex;
		height:100%;
	}
	.el-aside{
		background-color: #d9ecff;
		text-align: center;
		line-height:60px;


	}
	.el-aside{
		background-color: d9ecff;
		text-align: center;
		line-height: 60px;
	}
	.el-header{
		background-color:#c6e2ff;
		text-align: center;
		align-items: center;
		line-height: 60px;
	}
	.header-avatar {
	  float: right;
	  width: 210px;
	  display: flex;
	  height: 60px;
	  justify-content: space-around;
	  align-items: center;
	}
	.el-main{
		
		line-height:60px;
		background-color: #ecf5ff;
		height: 100%;
	}
	
</style>